<template>
    <span class="dynamic-number">{{formatAmount}}</span>
</template>

<script>
let TweenLite = window.TweenLite;
import { keepN } from '../utils/common';

export default {
    name: 'DynamicNumber',
    props: {
        number: {
            type: Number,
            default: 0
        },
        /**
         * 保留n位小数
         */
        fixed: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            tweenedNumber: 0
        };
    },
    computed: {
        formatAmount() {
            return keepN(this.tweenedNumber, this.fixed);
        }
    },
    watch: {
        number(newValue) {
            this.to(newValue);

        }
    },
    mounted() {
        this.to(this.number);
    },
    methods: {
        to(newValue) {
            TweenLite.to(this.$data, 0.5, { tweenedNumber: newValue });
        }
    }
};
</script>

<style>
.dynamic-number {
    display: inline-block;
}
</style>